<extend name="work/baseuser"/>
<block name="content">

    <div class="case-content ">
        <div class="news-flow">
            <div class="layui-fluid pb50">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" value="{$info.username|default=''}" lay-verify="required"
                                   placeholder="真实姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">图形码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="captcha" required lay-verify="required"
                                   placeholder="输入右边图形码" autocomplete="off" class="layui-input" lay-verType="tips"
                                   id="captcha">
                        </div>
                        <div class="layui-form-mid" style="padding: 0!important;"><img
                                src="{:captcha_src()}" class="login-codeimg" id="vercode"></div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="mobile" value="{$info.mobile|default=''}" lay-verify="required"
                                   placeholder="11位手机号码" autocomplete="off" class="layui-input" id="mobile">
                        </div>
                        <div class="layui-form-mid" style="padding: 0!important;">
                            <button type="button" class="layui-btn layui-btn-normal" id="getcode">获取验证码
                            </button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="code" required lay-verify="required"
                                   placeholder="手机验证码" autocomplete="off" class="layui-input" lay-verType="tips">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">新密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" placeholder="和新密码相同"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">重复密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="repassword"  placeholder="和新密码相同"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <input type="hidden" name="id" value="{$info.id|default=''}">
                    <blockquote class="layui-elem-quote layui-quote-nm">
                        必须为真实姓名才能履行相关协议<br>
                        手机号码不能和现有注册用户重复<br>
                        密码不修改请保持新密码和重复密码为空<br>
                        手机验证码正确才能进行修改<br>
                    </blockquote>
                    <input type="hidden" name="id" value="{$info.id|default=''}">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="saveedit">保存修改</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>


        </div>

    </div>

    <!-- end case-content -->
</block>
<block name="script">

    <script type="text/javascript">
        layui.use(['form','carousel', 'jquery', 'element', 'table', 'layer'], function () {
            var carousel = layui.carousel
                , element = layui.element
                , layer = layui.layer
                , table = layui.table
                , form = layui.form
                , $ = layui.$;
            $('#getcode').click(function () {
                if ($('#captcha').val().length == 5) {
                    if ($('#mobile').val().length != 11) {
                        layer.msg('请先输入正确的手机号码');
                        return false;
                    }
                    $.ajax({
                        url: "{:url('/home/user/forgetcode')}",
                        type: 'post',
                        dataType: 'json',
                        data: {
                            mobile: $('#mobile').val(),
                            captcha:$('#captcha').val(),
                        }
                    })
                        .done(function (res) {
                            if (res.code==1) {
                                layer.alert(res.msg, {
                                    closeBtn: 0
                                    ,anim: 3 //动画类型
                                });

                            }else if (res.code==0) {
                                layer.alert(res.msg, {
                                    closeBtn: 0
                                    ,anim: 3 //动画类型
                                });
                                $('#vercode').click();
                            }else {
                                layer.msg('服务器错误', {
                                    time: 1500,
                                    icon: 5
                                });

                            }
                        })
                        .fail(function () {
                            layer.msg('服务器异常,请稍后再试', {
                                time: 1500,
                                icon: 5
                            });
                        })
                        .always(function () {

                        });

                } else {
                    layer.msg('请先输入正确的图形码');
                }
                return false;
            });

            $('#vercode').click(function () {
                var src = '{:captcha_src()}';
                $(this).attr('src', src + '?' + Math.random());
                return false;
            });

            form.on('submit(saveedit)', function (data) {
                // layer.msg(JSON.stringify(data.field));
                $.ajax({
                    url: "{:url('/home/homeuser/userinfo')}",
                    type: 'post',
                    dataType: 'json',
                    data: data.field
                })
                    .done(function (res) {
                        if (res.code) {
                            layer.msg(res.msg, {
                                closeBtn: 0
                                , icon: 1
                            });
                        }else{
                            layer.msg(res.msg, {
                                time: 1500,
                                icon: 5
                            });
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常,请稍后再试', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });
                return false;
            });
            $('.app-header-menuicon').on('click', function () {
                $('.header-down-nav').toggleClass('down-nav')
            })

        });
    </script>
</block>